<template>
	<div id="personal">
		<el-row class="mi_right_top">
			<el-col :span="6"><img src="../../../public/images/staticman.png"></el-col>
			<el-col class="name" :span="4">姓名：Dolores<el-button>修改</el-button></el-col>
			<el-col class="title" :span="6">
				<span><i class="iconfont">&#xe62f;</i>手机号码</span>
				<span><i class="iconfont">&#xe630;</i>密码</span>
			</el-col>
			<el-col class="msg" :span="4">
				<span>18355353445</span>
				<span>****</span>
			</el-col>
			<el-col class="btn" :span="4">
				<span><a>修改</a></span>
				<span>
					<a>修改</a>
					<a>找回</a>
				</span>
			</el-col>
		</el-row>
		<div class="mi_right_bottom">
			<h2>我的资料</h2>
			<div class="elrow">
				<el-row>
					<el-col :span="5"><i class="iconfont">&#xe632;</i>我的银行卡</el-col>
					<el-col :span="13">6225 **** **** 4758</el-col>
					<el-col :span="6"><a href="mi_bind_bankcard.html">绑定</a></el-col>
				</el-row>
				<el-row>
					<el-col :span="5"><i class="iconfont">&#xe633;</i>我的身份证</el-col>
					<el-col :span="13">362526********172X</el-col>
					<el-col :span="6"><a href="mi_bind_idcard.html">绑定</a></el-col>
				</el-row>
				<el-row>
					<el-col :span="5"><i class="iconfont">&#xe634;</i>地址</el-col>
					<el-col :span="13">上海市虹口区四川北路859号中信广场</el-col>
					<el-col :span="6"><a href="">修改</a></el-col>
				</el-row>
				<el-row>
					<el-col :span="5"><i class="iconfont">&#xe631;</i>邮箱</el-col>
					<el-col :span="13">未绑定</el-col>
					<el-col :span="6"><a href="mi_bind_idcard.html">绑定</a></el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "personal"
	}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../public/css/variable.less';	
	.mi_right_top{
		background: @cw;
		padding: 60px 0 50px 0;
		overflow: hidden;
		margin-bottom: 15px;
		.bdr(5px);
		.fonts(14px);
		color: #4f5564;
		img{
			display: block;
			width: 80px;
			height: 80px;
			.bdr(50%);
			margin: 6px auto 0;
		}
		span{
			display: block;
			margin-bottom: 20px;
			a{
				cursor: pointer;
				color: @cgolden
			}
		}
		.name{
			margin-top: 10px;
			border-right: 1px solid #efefef;
			button{  
				display: block;
				padding: 5px 15px;
				margin: 20px 0 0;
				&:hover{
					color: @cgolden;
					border-color: @cgolden;
				}
			}
		}
		.title{
			padding-left: 60px;
			i{
				display: inline-block;
			    width: 30px;
			    height: 30px;
			    background: #e7e7e7;
			    color: #c8c8c8;
			    .bdr(50%);
			    text-align: center;
			    line-height: 30px;
			    margin-right: 15px;
			}
		}
		.msg{
			text-align: center;
			padding-top: 10px;
			span{ margin-bottom: 35px; }
		}
		.btn{
			padding-top: 10px;
			padding-left: 30px;
			span{ margin-bottom: 33px; }
		}
	}
	.mi_right_bottom{
		background: @cw;
		padding: 30px 40px 100px;
		box-sizing: border-box;
		.bdr(5px);
		h2{
			position: relative;
		    .fonts(18px);
		    color: #4f5564;
		    padding-bottom: 25px;
		    border-bottom: 1px solid #eee;
		    margin-bottom: 25px;
		    &:after{
		    	content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 40px;
				height: 3px;
				background: @cgolden;
		    }
		}
		.elrow{
			border: 1px solid #e2eef2;
		}
		.el-row{
    		.fonts(14px);
			color: #4f5564;
			border-bottom: 1px solid #dfe8eb;
			line-height: 105px;
			.trans(.3s);
			.el-col{
				padding: 0 0 0 35px;
				border-left: 1px solid #f5f5f5;
				i{
					display: inline-block;
				    color: #b8b8b8;
				    padding-right: 10px;
				    vertical-align: middle;
				    .fonts(18px);
				}
				a{
					display: block;
					width: 80px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					border: 1px solid @cgolden;
					.bdr(3px);
					margin: 0 auto;
					color: @cgolden;
					&:hover{
						color: @cw;
						background: @cgolden;
					}
				}
				&:first-child{
					border-left: 0;
				}
				&:last-child{ padding: 35px 0; }
			}
			&:hover{
				background: #f0f8fa;
			}
		}
		
	}
	
</style>